<template>

  <div>
    <el-upload action="http://192.168.1.8:8030/v3/WorkOrderPro/upload" list-type="picture-card" accept="image/*" :headers='Token' :limit="imgLimit" :file-list="productImgs" :multiple="isMultiple" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-exceed="handleExceed" :on-error="imgUploadError">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Token: {
        Token: window.sessionStorage.getItem('Token')
      },
      dialogImageUrl: '',
      dialogVisible: false,
      productImgs: [],
      isMultiple: true,
      imgLimit: 3,
      imageUrl: []
    }
  },
  props: {
    editUrl: { type: Array, default: () => { [] } }
  },
  mounted() {
    this.editUrl.forEach(item => {
      let obj = new Object();
      obj.url = item;
      this.productImgs.push(obj);
    });
  },
  methods: {
    handleRemove(file, fileList) {//移除图片
      this.imageUrl = []
      fileList.forEach(item => {
        this.imageUrl.push(item.url)
      })
      const url = this.imageUrl.join(',')
      this.$emit('imgUrl', url)
    },
    handlePictureCardPreview(file) {//预览图片时调用
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
      const isJPG = true;
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {//图片上传成功
      this.imageUrl.push('http://192.168.1.8:8030' + res.data)
      if (this.productImgs.length) {
        let filterUrl = this.productImgs.map(item => item.url)
        const mergeUrl = [...filterUrl, ...this.imageUrl]
        const url = mergeUrl.join(',')
        this.$emit('imgUrl', url)
      } else {
        const url = this.imageUrl.join(',')
        this.$emit('imgUrl', url)
      }

    },
    handleExceed(files, fileList) {//图片上传超过数量限制
      this.$message.error('上传图片不能超过3张!');
    },
    imgUploadError(err, file, fileList) {//图片上传失败调用
      this.$message.error('上传图片失败!');
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-upload__input {
  display: none;
}
/deep/.el-image {
  margin: 2px 5px;
}
/deep/.el-upload-list__item {
  width: 100px;
  height: 100px;
}

/deep/.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 110px;
  margin: 5px;
}
/deep/.el-upload-list--picture-card {
  background-color: #fff !important;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-status-label {
  right: -26px;
  top: -9px;
  display: none;
  padding: 0;
}
/deep/ .el-image__inner {
  border-radius: 5px;
}
</style>
